<template>
    <div>
      <p>这是文章页面</p>
      <p>文章ID:{{ $route.params.id }}</p>
      <p>文章ID来自计算属性:{{ pageId }}</p>
      <p>title:{{ title }}</p>
      <button @click="jumpBack">点击事件返回上一页</button>
      <button @click="jumpother">进入另一篇文章</button>
      <p>{{ value }}</p>
    </div>
  </template>

<script>
export default {
  name: 'artcle-page',
  computed: {
    pageId () {
      return this.$route.params.id
    },
    title () {
      return this.$route.meta.title
    }
  },
  data () {
    return {
      value: ''
    }
  },
  /*   watch: {
      // 对路由变化作出响应,当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用,
      $route(to, from) {
        console.log('watch-from: ', from)
        console.log('watch-to: ', to)
        if (to.params.id === '3333') {
          this.value = 1
        } else {
          this.value = ''
        }
      }
    }, */
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log('to, from: ', to, from)
    if (to.params.id === '3333') {
      this.value = 2
    } else {
      this.value = ''
    }
    next()
  },
  mounted () {
    //
    console.log(
      'mounted:可以在这里面请求数据,但是例如从 /user/foo 导航到 /user/bar这种情况不会触发,就要watch里面请求'
    )
  },
  methods: {
    jumpBack () {
      this.$router.go(-1)
    },
    jumpother () {
      this.$router.push('/artcle/3333')
    }
  }
}
</script>

  <style lang="scss" scoped></style>
